<template>
  <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input
            v-model="filters.name"
            placeholder="姓名"
            @input="verifyText($event, 'name', 'filters')"
            clearable
          ></el-input>
        </el-form-item>
        <el-select v-model="filters" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-select v-model="filters" clearable placeholder="请选择">
          <el-option
            v-for="item in catelist"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table
      :data="drivers"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!--设置模板-->
      <el-table-column prop="id" label="id" width="120" sortable>
      </el-table-column>
      <el-table-column prop="address" label="住址" width="120" sortable>
      </el-table-column>
      <el-table-column prop="age" label="年龄" min-width="80" sortable>
      </el-table-column>
      <el-table-column prop="identity" label="身份" min-width="50" sortable>
      </el-table-column>
      <el-table-column prop="license" label="执照" min-width="50" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名" min-width="80" sortable>
      </el-table-column>
      <el-table-column prop="phone" label="电话" min-width="80" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" min-width="80" sortable>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDel(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

     <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button
        type="danger"
        @click="batchRemove"
        >批量删除</el-button
      >
      <!--<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>-->
      <!--新分页条-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="float: right"
      >
      </el-pagination>
    </el-col>
  </section>
</template>
<script>
export default {
  data() {
    return {
      filters: {
        name: "",
        status: "",
        driver_category: "",
      },
      options: ["A1","A2","A3","B1","B2","C1","C2","C3","C4","C5","D","E","F","M","N","P"], //给下拉框查询用的 license
      catelist: [], //用来装车辆类型的
      drivers: [], //装列表数据的
      total: 55,
      pageSizes: [5, 10, 15, 20], //分页的规则
      currentPage: 1, //当前页
      pageSize: 10, //每页显示条目个数
      title: "",
      listLoading: false,
      //新增和修改公用同一套
      editFormVisible: false, //编辑界面是否显示
      editLoading: false, //忙等框
      editFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
      //编辑界面数据 准备一个对象用于给后台传递数据 和模型层里面的条条框框绑定
      editForm: {
        id: null,
        address: "",
        age: "",
        password: "",
        passwords: "",
        identity: "",
        license: "",
        name: "",
        phone: "",
        state: "",
        identityp: "",
        identityr: "",
        email: "",
      },
    };
  },
  methods: {
    search() {
      //查询还是交给查询全部去做，但是为了排除一个bug需要跳转到第一页
      this.currentPage = 1;
      //然后调用查询方法
      this.getDrivers();
    },
    editSubmit() {
      //1,在这里可以实现一个校验表单的过程
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          //如果valid为true，就是说校验表单的东西都完成了
          //提示文案
          this.$confirm("确认提交吗？", "温馨提示", { type: "warning" })
            .then(() => {
              //2,开启忙等框
              this.editLoading = true;
              //3,获取到所有的数据
              let para = Object.assign({}, this.editForm);
              //4,发送请求调用接口
              this.$http
                .put("/driver", para)
                .then((result) => {
                  // console.log(result.data);
                  //关闭忙等框
                  this.editLoading = false;
                  //刷新页面，且重新加载
                  location.reload();
                  this.getDrivers();
                })
                .catch((result) => {
                  // console.log(result.data);
                  //关闭忙等框
                  this.editLoading = false;
                  //刷新页面，
                  location.reload();
                });
            })
            .catch(() => {
              // console.log("取消提交");
            });
        }
      });
    },
    batchRemove() {
      //在页面选择的时候，会将对象装到sels数组中，这里取出来，变成id数组
      var ids = this.sels.map((item) => item.id);
      // console.log(ids);
      this.$confirm("是否删除选中的数据？", "温馨提示", { type: "warning" })
        .then(() => {
          //带着数组调用接口，实现批量删除的功能
          this.$http
            .patch("/driver", ids)
            .then((result) => {
              //如果成功了，就打印信息并且重新加载页面
              // console.log(result);
              this.getDrivers();
            })
            .catch((result) => {
              // console.log(result);
            });
        })
        .catch((result) => {
          // console.log("取消删除操作");
        });
    },
    handleDel(index, row) {
      this.$confirm("是否删除该数据？", "温馨提示", { type: "warning" })
        .then(
          //再设置一个函数，成功了就执行
          () => {
            //获取到id
            let id = row.id;
            //发送axios请求
            this.$http
              .delete("/driver/" + id)
              .then((result) => {
                //如果成功了，就打印信息并且重新加载页面
                // console.log(result);
                this.getDrivers();
              })
              .catch((result) => {
                // console.log(result);
              });
          }
        )
        .catch((result) => {
          // console.log("取消删除操作");
        });
    },
    //三,页码发生改变
    handleCurrentChange(val) {
      // console.log(val);
      /*把新页码交给模型层的数据,页码发生改变，1，把页码赋值给当前页码，带着一页多少条一起去数据库查*/
      this.currentPage = val;
      // console.log(
      //   "赋值后的当前页：" + this.currentPage + "页总数：" + this.pageSize
      // );
      //2,调用getDriver查询
      this.getDrivers();
    },
    //二,页数发生改变
    handleSizeChange(val) {
      /*分析，页数量发生改变，把数量赋值给模型层*/
      // console.log(val);
      // console.log(
      //   "赋值后的当前页：" + this.currentPage + "页总数：" + this.pageSize
      // );
      this.pageSize = val;
      //调用depart方法
      this.getDrivers();
    },
    //一,获取车辆列表
    getDrivers() {
      //1,将数值加到对象里面
      let para = {
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        keyWord: this.filters.keyWord,
        status: this.filters.status,
        driver_category: this.filters.driver_category,
      };
      // console.log(para);
      //2,简单写法，显示到列表
      this.$http
        .post("/driver", para)
        .then((result) => {
          // console.log(result.data);
          //3,把返回的数值同步到模型层
          this.drivers = result.data.rows;
          this.total = result.data.total;
        })
        .catch((result) => {
          // console.log("查询失败，请刷新重试");
        });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      //给title赋值
      this.title = "编辑";
      this.editFormVisible = true;
      //把当前行的赋值给表单里面 克隆，不克隆有bug
      this.editForm = Object.assign({}, row);
    },
    //显示表单，进行添加
    handleAdd() {
      //给title赋值
      this.title = "新增";
      this.editFormVisible = true; //新增页面打开表单
      //重置表单，如果不重置的话，会很麻烦
      this.editForm = {
        id: null,
        address: "",
        age: "",
        password: "",
        passwords: "",
        identity: "",
        license: "",
        name: "",
        phone: "",
        state: "",
        identityp: "",
        identityr: "",
        email: "",
      };
      // console.log(this.editForm);
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
  },
  mounted() {
    this.getDrivers();
    // this.getCateGory();
  },
};
</script>
